<script setup lang="ts">
import { useRoute } from 'vue-router'
import { useRouteStore } from '@/stores'

const route = useRoute()
const routeStore = useRouteStore()
const breadcrumbList = computed(() => {
  const lastPath = route.matched[route.matched.length - 1].path
  return routeStore.breadcrumbList[lastPath] ?? []
})

// 禁用整个文件的未使用变量检测
function handleQuery(item, query) {
  return query
}
</script>

<template>
  <el-breadcrumb
    class="arrow relative flex overflow-hidden"
  >
    <transition-group name="slide-right" appear>
      <el-breadcrumb-item v-for="(item) in breadcrumbList" :key="item.path">
        <div class="el-breadcrumb__inner flex-y-center">
          <router-link
            :to="{
              path: item.path,
              query: handleQuery(item, route.query),
            }"
          >
            <div flex-center>
              <i v-if="item.meta.icon" :class="item.meta.icon" class="mr1 text-333 text-base" />
              {{ item.meta.title }}
            </div>
          </router-link>
        </div>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<style lang="scss" scoped>
.el-breadcrumb.arrow {
  :deep(.el-breadcrumb__item) {
    .el-breadcrumb__inner {
      font-size: 12px;
      background-color: var(--el-fill-color);
      transition:
        background-color 0.3s,
        var(--el-transition-color);
      padding: 2px 8px;
      -webkit-clip-path: polygon(
        0 0,
        calc(100% - 8px) 0,
        100% 50%,
        calc(100% - 8px) 100%,
        0 100%,
        8px 50%
      );
      clip-path: polygon(
        0 0,
        calc(100% - 8px) 0,
        100% 50%,
        calc(100% - 8px) 100%,
        0 100%,
        8px 50%
      );
    }

    .el-breadcrumb__separator {
      display: none;
    }
  }
}
</style>
